<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">应急救援</text>
			<!-- <view class="more-icon">
        <image src="@/static/more.png" mode="aspectFit"></image>
      </view> -->
		</view>
		<!-- 地图卡片 -->
		<view class="map-card">
			<map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers"
				@markertap="handleMarkerTap"></map>
		</view>
		<!-- 导航栏 -->
		
		<!-- 卡片区域 -->
		<view class="card">
			<view class="nav-bar">
				<view :class="{ active: currentTab === 'jumpStart' }" @click="currentTab = 'jumpStart'">
					搭电
				</view>
				<view>
					换胎
				</view>
				<view :class="{ active: currentTab === 'towing' }" @click="currentTab = 'towing'">
					拖车
				</view>
			</view>
			<view v-if="currentTab === 'jumpStart'">
				<view class="form-item">
					<label>位置</label>
					<input placeholder="河南省焦作市山阳区 32 号" />
				</view>
				<view class="form-item">
					<label>求助人</label>
					<input placeholder="张先生" />
				</view>
				<view class="form-item">
					<label>联系方式</label>
					<input placeholder="15523632541" />
				</view>
				<view class="form-item">
					<label>车牌</label>
					<input placeholder="豫 CJ4321" />
				</view>
				<view class="form-item">
					<label>描述</label>
					<textarea placeholder="请准确描述当前的状况及所需的帮助"></textarea>
				</view>
			</view>
			<view v-if="currentTab === 'towing'">
				<view class="form-item">
					<label>起点</label>
					<input placeholder="河南省焦作市山阳区 32 号" />
				</view>
				<view class="form-item">
					<label>终点</label>
					<input placeholder="山阳区解放路 66 号" />
				</view>
				<view class="form-item">
					<label>求助人</label>
					<input placeholder="张先生" />
				</view>
				<view class="form-item">
					<label>联系方式</label>
					<input placeholder="15523632541" />
				</view>
				<view class="form-item">
					<label>车牌</label>
					<input placeholder="豫 CJ4321" />
				</view>
				<view class="form-item">
					<label>描述</label>
					<textarea placeholder="请准确描述当前的状况及所需的帮助"></textarea>
				</view>
			</view>
		<!-- 呼叫救援按钮 -->
		<button class="call-button" @click="callRescue">呼叫救援</button>
		<!-- 救援记录链接 -->
		<view class="record-link" @click="viewRecords">救援记录 ></view>
		</view>
		
		<view class="card2">
		      <view class="header2">
		        <text class="title2">警务救助</text>
		      </view>
			  
		      <view class="content2">
		        <view class="item2" @click="callService('122')">
		          <view class="text2">
		          					  <view class="icon2">
		          					    <image src="/static/help/交通事故 拷贝@3x.png" mode="aspectFit"></image>
		          					  </view>
		            <text class="name2">交通事故</text>
		            <text class="number2">122</text>
		          </view>
		          
		        </view>
		        <view class="item2" @click="callService('119')">
		          
		          <view class="text2">
					  <view class="icon2">
					    <image src="/static/help/火警@3x.png" mode="aspectFit"></image>
					  </view>
		            <text class="name2">火警</text>
		            <text class="number2">119</text>
		          </view>
		        </view>
		        <view class="item2" @click="callService('120')">
		          
		          <view class="text2">
					  <view class="icon2">
					    <image src="/static/help/急救包@3x.png" mode="aspectFit"></image>
					  </view>
		            <text class="name2">急救中心</text>
		            <text class="number2">120</text>
		          </view>
		        </view>
		        <view class="item2" @click="callService('110')">
		          
		          <view class="text2">
					  <view class="icon2">
					    <image src="/static/help/警察,公安@3x.png" mode="aspectFit"></image>
					  </view>
		            <text class="name2">公安报警</text>
		            <text class="number2">110</text>
		          </view>
		        </view>
		      </view>
		    </view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 地图中心经纬度（可根据实际需求调整）
	const latitude = ref(35.24);
	const longitude = ref(113.26);
	// 地图缩放级别
	const scale = ref(15);
	// 地图标记点
	const markers = ref([{
		id: 0,
		latitude: 35.24,
		longitude: 113.26,
		title: '山阳区人民西路32号',
		iconPath: '@/static/marker.png' // 需准备对应的标记图标，放在static目录下
	}]);
	// 当前选中的导航项
	const currentTab = ref('jumpStart');

	// 模拟呼叫救援逻辑
	const callRescue = () => {
		console.log('发起呼叫救援请求');
	};

	// 模拟查看救援记录逻辑
	const viewRecords = () => {
	  uni.navigateTo({
	    url: '/pages/relief/record/record'
	  });
	};
	// 当前选中的服务
	const selectedService = ref('');

	// 标记点点击事件处理
	const handleMarkerTap = (e) => {
		console.log('点击了标记点', e);
	};

	// 选择服务的方法
	const selectService = (service) => {
		selectedService.value = service;
	};
	const callService = (number) => {
	  console.log(`正在拨打 ${number}`);
	  // 实际开发中可使用uni.makePhoneCall等方法实现拨打电话功能
	  // uni.makePhoneCall({
	  //   phoneNumber: number
	  // });
	};
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		/* padding: 15px; */
	}

	.header {
		/* display: flex;
  justify-content: space-between;
  align-items: center; */
		text-align: center;
		background-color: #007aff;
		color: white;
		height: 300rpx;
		padding-top: 20rpx;
		/* padding: 10px 15px;
  margin: -15px -15px 15px -15px; */

	}

	.title {
		font-size: 20px;
		font-weight: 600;
	}

	.more-icon {
		width: 30px;
		height: 30px;
	}

	.map-card {
		margin: -220rpx 15rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 440rpx;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
		overflow: hidden;
	}

	.map-card map {

		width: 90%;
		height: 200px;
	}

	

	.nav-bar {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.nav-bar view {
		padding: 10px;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}

	.nav-bar view.active {
		border-bottom: 2px solid #007aff;
	}

	.card {
		font-size: 24rpx;
		border: 1px solid #ccc;
		border-radius: 8px;
		padding: 10px;
		background-color: #fff;
		margin: 15rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.form-item label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 60rpx;
		margin-right: 10px;
		background-color: #4fa2ff;
		text-align: center;
		color: #fff;
		border-radius: 30rpx;
	}

	.form-item input,
	.form-item textarea {
		flex: 1;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.call-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70%;
		height: 70rpx;
		line-height: 70rpx;
		padding: 12px;
		background-color: #FF5722;
		color: white;
		border: none;
		border-radius: 30px;
		margin-top: 20px;
	}

	.record-link {
		text-align: center;
		color: #999;
		margin-top: 10px;
		cursor: pointer;
	}
	.card2 {
		height: 270rpx;
		font-size: 24rpx;
		border: 1px solid #ccc;
		border-radius: 8px;
		padding: 10px;
		background-color: #fff;
		margin: 15rpx;
	}
	.header2 {
	  margin-bottom: 20px;
	}
	.title2 {
	  font-size: 24px;
	  font-weight: bold;
	}
	.content2 {
	  display: flex;
	  justify-content: space-around;
	}
	.item2 {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	}
	.icon2 {
	  width: 100%;
	  height: 60%;
	  margin-bottom: 10px;
	}
	.icon2 image{
		width: 60%;
		height: 100%;
	}
	.text2 {
	  text-align: center;
	}
	.name2 {
		display: block;
	  font-size: 18px;
	  margin-bottom: 5px;
	  width: 100%;
	}
	.number2 {
		display: block;
	  font-size: 16px;
	  color: #666;
	  width: 100%;
	}
</style>